<template>
  <div class="excel-box">
    <div class="main">
      <!-- bb -->
      <div
        class="ex-col"
        :style="{
          width: tableSetting.rows.colWidth[index]
            ? tableSetting.rows.colWidth[index] + 'px'
            : '',
        }"
        v-for="(col, index) in titleData"
        :key="index"
      >
        <div
          class="title"
          :style="{
            height: tableSetting.rows.rowHeight + 'px',
            'line-height': tableSetting.rows.rowHeight + 'px',
          }"
        >
          {{ col.title }}
        </div>
        <div
          class="cell"
          :style="{
            height: tableSetting.rows.rowHeight + 'px',
            'line-height': tableSetting.rows.rowHeight + 'px',
          }"
          v-for="(cell, cellIdex) in hotData"
          :key="index + ''+cellIdex"
        >
          <span
            v-if="current != index + '' + cellIdex"
            @dblclick="iptValue(index, cellIdex, current)"
          >
            {{ cell[col.name] }}
          </span>
          <el-input
            v-else
            @keyup.enter="current = ''"
            @blur="current = ''"
            class="cellIpt"
            type="textarea"
            autosize
            :resize="'none'"
            v-model="cell[col.name]"
          />
        </div>
      </div>
    </div>
    <footer>
      <div
        class="footCell"
        :style="{
          
        }"
        v-for="(cell, cellIdex) in footerData"
        :key="cellIdex"
      >
        <div
          v-for="(liCel, liIndex) in cell"
          :key="liIndex"
          :style="{
            height: tableSetting.footer.rows.rowHeight + 'px',
            'line-height': tableSetting.footer.rows.rowHeight + 'px',
            width:tableSetting.footer.rows.colWidth[liIndex] + 'px'
          }"
        >
          <span
            v-if="footCurrent != cellIdex + '' + liIndex"
            @dblclick="footIptValue(cellIdex, liIndex, footCurrent)"
            style="padding-left:10px"
          >
            {{ liCel }}
          </span>
          <el-input
            v-else
            @blur="footCurrent = ''"
            @focus="footCurrent = cellIdex + '' + liIndex"
            class="cellIpt"
            type="text"
            autosize
            :resize="'none'"
            v-model="cell[liIndex]"
          />
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "ExcelCom",
  props: ['title','hot','footer','setting'],  
  data() {
    return {
      current: "",
      footCurrent: "",
      //头部
      titleData: [
        {
          title: "项目",
          name: "program",
        },
        {
          title: "行次",
          name: "rowCount",
        },
        {
          title: "本年累计金额",
          name: "yearMoney",
        },
        {
          title: "上年累计金额",
          name: "lastYearMoney",
        },
      ],
      //表格内容
      hotData: [
        {
          program: "一、经营活动产生的现金流量：",
          rowCount: "",
          yearMoney: "",
          lastYearMoney: "",
        },
        {
          program: "销售产成品、商品、提供劳务收到的现金",
          rowCount: 1,
          yearMoney: 7987,
          lastYearMoney: 7987,
        },
      ],
      // footerExcel
      footerData: [
        ["经办人：", "受理人："],
        ["经办人证件类型：", "受理人税务机关："],
        ["经办人证件号码：", "受理日期："],
        ["代理机构：", ""],
        ["申报日期：", ""],
      ],
      //   表格设置
      tableSetting: {
        // 行设置
        rows: {
          colWidth: [500, 160, 300, 300],
          rowHeight: 35,
        },
        // 列设置
        columns: {},
        // 对齐方式
        align: [],

        // footer
        footer: {
          rows: {
            colWidth: [630, 630],
            rowHeight: 35,
          },
        },
      },
    };
  },
  created() {
    this.renderExcel()
  },
  mounted(){
    
  },
  methods: {
    iptValue(i, j) {
      this.current = i + "" + j;
    },
    footIptValue(i,j){
        console.log(i, "+", j);
        this.footCurrent = i + "" + j;
    },
    renderExcel() {
        if(this.title) this.titleData = this.title
        if(this.hot) this.hotData=this.hot
        if(this.footer)  this.footerData=this.footer
        if(this.setting) this.tableSetting=this.setting
    }

  },
};
</script>

<style lang="scss">
.main {
  display: flex;
  .cellIpt {
    width: 100%;
  }
  .ex-col {
    border: 1px solid #cccccc;

    border-right: none;
    .title {
      background-color: #f0f0f0;
      border-bottom: 1px solid #cccccc;
      width: 100%;
      //   display: flex;
      //   align-items: center;
      text-align: center;
    }
    .cell {
      background-color: #fff;
      border-bottom: 1px solid #cccccc;
      text-align: center;
    }
    .cell:last-child {
      border-bottom: none;
    }
  }
  .ex-col:last-child {
    border: 1px solid #cccccc;
  }


}
footer{
    border: 1px #ccc solid;
    border-top: none;
    // padding: 0 10px
}
.footCell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    div:nth-of-type(2n){
        border-left:1px #ccc solid;
    }
  }
  .el-textarea__inner{
    border-radius: 0;
  }
</style>